<template>
  <div class="p">
    <el-descriptions
      title="我的信息"
      direction="vertical"
      :column="1"
      :size="size"
      border
      :v-bind="user"
    >
      <template #extra>
        <el-button type="primary" @click="dialogVisible = true">修改信息</el-button>
      </template>

      <el-descriptions-item label="姓名">{{ user.name }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{
        user.phonenum
      }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{
        user.username
      }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ user.sex }}</el-descriptions-item>
      <el-descriptions-item label="出生日期">{{
        user.birthday
      }}</el-descriptions-item>
      <el-descriptions-item label="创建的订单数">{{ user.orderCount }}</el-descriptions-item>

      <el-descriptions-item label="余额"
        >{{ user.balance }}

        <el-button class="cz" type="success" round @click="addialogVisible = true"
          >充值</el-button
        >
      </el-descriptions-item>

    </el-descriptions>

    <el-dialog v-model="dialogVisible" title="修改" width="30%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="账号" :label-width="auto" prop="username">
          <el-input v-model="form.username" placeholder="改一个新的登录账号吧" />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="auto" prop="phonenum">
          <el-input v-model="form.phonenum" 
          placeholder="请输入新的手机号" 
          @input="form.phonenum = form.phonenum.replace(/^(0+)|[^\d]+/g, '')"
            maxlength="11">
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="update()">确定修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <el-dialog v-model="addialogVisible" title="充值" width="30%">

      <el-form :model="adform">
        <el-form-item label="金额" :label-width="auto">
          <el-input v-model="adform.balance" placeholder="请输入充值金额">
          </el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="addialogVisible = false">取消</el-button>
        <el-button class="chongzhi" type="primary" @click="confirm()">充值</el-button>
      </span>

  </el-dialog>
</template>

<script setup>
import { computed, ref } from "vue";
import { getApi, postApi, deleteApi, updateApi } from "@/util/api";
import { ElMessage } from "element-plus";
</script>

<script>
import { getApi } from "@/util/api";

export default {
  data() {
    return {
      user: {
        usernmae: "",
        name: "",
        phonenum: "",
        sex: "",
        birthday: "",
        balance: "",
        orderCount:0,
      },
      dialogVisible: false,
      addialogVisible: false,
      form: {
        username: "",
        phonenum: "",
      },
      adform: {
        balance: "",
      },
      rules: {
        username:[
          { required: true, message: "请输入新的账号", trigger: "blur" },
          { min:5, max:12,message:"用户名长度在5-12个字符" ,trigger: "blur" },
        ],
        phonenum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }
        ],
       } 
    };
  },
  created() {
    this.findMe();
  },
  methods: {
    findMe() {
      getApi("users").then((res) => {
        if (res.data.code == 1) {
          this.user = res.data.data;
        }
      });
    },
//修改
    update() {
       this.$refs['form'].validate((valid)=>{
         if(valid){
                updateApi("users", this.form).then((res) => {
                if (res.data.code == 1) {
                  ElMessage.success("修改成功");
                  this.dialogVisible = false;
                  this.findMe();
                  this.form={}
                  }
                else if(res.data.code == -1){
                  ElMessage.warning("已经有该用户了，换一个吧！")
                  this.form={};
                }
           });
         }
         else return false;
       })
     
    },

//充值
    confirm() {
      updateApi("users/addmoney" ,{},this.adform)
        .then((res) => {
          if (res.data.code == 1) {
            ElMessage.success("充值成功！");
            this.addialogVisible = false;
          } else if (res.data.code == -1) {
            ElMessage.error("充值失败，请联系管理员处理！");
            this.addialogVisible = false;
          }
        })
        .finally(() => {
          this.findMe();
          this.adform = {};
        });
    },
  },
};
</script>


<style scoped>
.el-descriptions {
  margin-top: 20px;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.el-descriptions-item {
  display: flex;
}
.cz{
  position: absolute;
  right: 20px;
  bottom: 5px;
}
</style>
